<template>
    <div class="health-record-page">
        <van-nav-bar :title="$t('healthRecord.title')" left-arrow @click-left="onClickLeft" />
        <div class="profile-header">
            <van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <div class="user-name-bubble">
                <span>罗雨</span>
            </div>
            <van-icon name="plus" class="add-user-btn" />
        </div>
        <van-tabs v-model:active="activeTab" background="#f5faff" color="#3b8cff" line-width="30">
            <van-tab :title="$t('healthRecord.folder')">
                <div class="tab-section">
                    <div class="section-title">{{ $t('healthRecord.folder') }}</div>
                    <div class="folder-grid">
                        <div class="folder-card" v-for="item in folderList" :key="item.label">
                            <div class="folder-label">{{ $t(item.label) }}</div>
                            <div class="folder-upload">{{ $t('healthRecord.upload') }} &gt;</div>
                            <div class="folder-icon">📄</div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab :title="$t('healthRecord.history')">
                <div class="tab-section">
                    <div class="section-title">{{ $t('healthRecord.history') }}</div>
                    <div class="history-grid">
                        <div class="history-card" v-for="item in historyList" :key="item.label">
                            <van-icon :name="item.icon" />
                            <div class="history-label">{{ $t(item.label) }}</div>
                            <div class="history-desc">{{ $t(item.desc) }}</div>
                        </div>
                    </div>
                    <div class="edit-btn">{{ $t('common.edit') }} &gt;</div>
                </div>
            </van-tab>
            <van-tab :title="$t('healthRecord.plan')">
                <div class="tab-section">
                    <div class="section-title">{{ $t('healthRecord.plan') }}</div>
                    <div class="plan-card">
                        <div>{{ $t('healthRecord.addPlanTip') }}</div>
                        <van-button type="primary" size="small">{{ $t('common.add') }}</van-button>
                    </div>
                </div>
            </van-tab>
            <van-tab :title="$t('healthRecord.medicineBox')">
                <div class="tab-section">{{ $t('healthRecord.medicineBox') }}</div>
            </van-tab>
            <van-tab :title="$t('healthRecord.exercise')">
                <div class="tab-section">{{ $t('healthRecord.exercise') }}</div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeTab = ref(0)

const folderList = [
    { label: 'healthRecord.outpatientRecord' },
    { label: 'healthRecord.prescription' },
    { label: 'healthRecord.dischargeSummary' },
    { label: 'healthRecord.physicalReport' },
    { label: 'healthRecord.reportSheet' }
]

const historyList = [
    { icon: 'plus', label: 'healthRecord.disease', desc: 'healthRecord.addDisease' },
    { icon: 'setting-o', label: 'healthRecord.allergy', desc: 'healthRecord.addAllergy' },
    { icon: 'edit', label: 'healthRecord.surgery', desc: 'healthRecord.addSurgery' },
    { icon: 'friends-o', label: 'healthRecord.family', desc: 'healthRecord.addFamily' }
]

const onClickLeft = () => {
    router.back()
}
</script>

<style lang="scss" scoped>
.health-record-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #eaf6ff 0%, #f7f8fa 100%);
}

.profile-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 0 16px;

    .user-name-bubble {
        background: #3b8cff;
        color: #fff;
        border-radius: 16px;
        padding: 4px 16px;
        margin: 0 8px;
        font-size: 16px;
    }

    .add-user-btn {
        font-size: 24px;
        color: #3b8cff;
        margin-left: 8px;
    }
}

.tab-section {
    margin: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}

.folder-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.folder-card {
    flex: 1 1 45%;
    min-width: 120px;
    background: #f5faff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .folder-label {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .folder-upload {
        color: #3b8cff;
        font-size: 14px;
        margin-bottom: 8px;
    }

    .folder-icon {
        font-size: 24px;
        color: #b0c4de;
        align-self: flex-end;
    }
}

.history-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.history-card {
    flex: 1 1 45%;
    min-width: 120px;
    background: #f5faff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .history-label {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .history-desc {
        color: #888;
        font-size: 14px;
    }
}

.edit-btn {
    color: #3b8cff;
    text-align: right;
    margin-top: 8px;
    font-size: 15px;
}

.plan-card {
    background: #f5faff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
}
</style>